
import * as echarts from 'echarts';
/*  
    id=div的id,
    xAxisData=x轴title,
    dataArr=柱状数据,
    colorData=每个柱状颜色,
    colorData2=每个色块的颜色,
    percentage=是否为百分比 
    numWidth=柱状宽度
*/

export function myEcharts(id,xAxisData,dataArr,colorData,colorData2,percentage,numWidth){
    console.log(id,xAxisData,dataArr,colorData);
    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    var option = {
        // color:colorData2,
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
            formatter: function(params) {
                    var result = ''
                    let name = ''
                    params.forEach(function (item) { 
                        let value = item.value?item.value:'暂无数据'
                        name = item.name + "</br>" 
                        if (percentage && dataArr[0].name) {
                            result += item.marker+item.seriesName+'：' + value+'%'+ "</br>"
                        }else if( dataArr[0].name){
                            result += item.marker+item.seriesName+'：' + value+ "</br>"
                        }else if(percentage){
                            result += item.marker+item.name+'：' + value+'%'+ "</br>"
                        }else{
                            result += item.marker+item.name+'：' + value+ "</br>"
                        }
                    })  
                    result =  dataArr[0].name?name+result:result
                return result
            } 
        },
        grid: {},
        xAxis: [{
            type: "category",
            data:xAxisData,
            axisTick: {
                // alignWithLabel: true,//底部刻度线居中
                show:false ,//关闭底部刻度线
            },
            axisLine: {//x轴线的配置
                show: true,//是否展示
                lineStyle: { 
                    color: "#ECEDF0", 
                    width: 1,//y轴线的宽度
                    type: "solid"//y轴线为实线
                },
            },
            axisLabel: {//X轴文字的配置 
                color: "#000",//X轴内容文字颜色 
            }, 
        }],
        yAxis: [{
            type: "value",
            splitLine: { 
                show: false,//去掉网格线  false
                lineStyle:{
                    type:'solid', //实线 dashed虚线
                    color:'#000', // 线的颜色
                    width: 1,  //网格线的加粗程度
                }
            },  
        }], 
        legend: {
            //色块靠右垂直对齐
            type: 'scroll',
            orient: 'vertical', 
            right: 10,
            top: 20,
            bottom: 20,
        },
        series:function(){
            let serie=[]
            dataArr.forEach((items) => { 
                console.log(items);
                let newarr = percentage?items.arr2:items.arr
                let newStyle = {}
                if (!items.name) {
                    newStyle =  {
                        // 每个柱子颜色不一样
                        color: function (params) { 
                            var colorList = colorData
                            if (params.dataIndex >= colorList.length) {
                                params.dataIndex = params.dataIndex - colorList.length
                            }
                            return colorList[params.dataIndex]
                        },
                    }
                } 
                serie.push(
                    {   
                        name:items.name,
                        type: 'bar',
                        barWidth: numWidth,
                        // 在这里对data进行自定义配置即可
                        data: newarr.map(item => {
                            // console.log(item, 'item')
                            return {
                                value: item,
                                label: {
                                    show: true,
                                    fontSize: 12,
                                    position: 'top',
                                    distance: 10,
                                    color: '#666',
                                    padding: [4, 4],
                                    formatter: percentage?'{c}%':'{c}',
                                    position: item > 0 ? 'top' : 'bottom',//如若数据为负, 柱状图的文字需要展示在下方
                                },
                                itemStyle: {
                                    borderRadius: item > 0 ? [15, 15, 0, 0] : [0, 0, 15, 15], // 动态设置柱状图圆角  
                                }
                            }
                        }),  
                        itemStyle:newStyle,
                    }
                    )
                });
            return serie;
            }(), 
    }
    option && myChart.setOption(option);
}

/* 
 {   
                type: 'bar',
                barWidth: '30',
                // 在这里对data进行自定义配置即可
                data: dataArr.map(item => {
                    // console.log(item, 'item')
                    return {
                        value: item,
                        label: {
                            show: true,
                            fontSize: 12,
                            position: 'top',
                            distance: 10,
                            color: '#666',
                            padding: [4, 4],
                            formatter: '{c}',
                            position: item > 0 ? 'top' : 'bottom',//如若数据为负, 柱状图的文字需要展示在下方
                        },
                        itemStyle: {
                            borderRadius: item > 0 ? [15, 15, 0, 0] : [0, 0, 15, 15], // 动态设置柱状图圆角
                                // 柱状图渐变
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#94C2FD'
                                },
                                {
                                    offset: 1,
                                    color: '#5C98CB'
                                }
                                ])  
                            }
                        }
                    }),
                    itemStyle: {
                        // 每个柱子颜色不一样
                        color: function (params) {
                            var colorList = colorData
                            if (params.dataIndex >= colorList.length) {
                                params.dataIndex = params.dataIndex - colorList.length
                            }
                            return colorList[params.dataIndex]
                        },
                    }
                }
*/
/* 
function(){
            let serie=[]
            dataArr.forEach((items) => {
                serie.push(
                    {   
                        name:items.name,
                        type: 'bar',
                        barWidth: '30',
                        // 在这里对data进行自定义配置即可
                        data: items.arr.map(item => {
                            // console.log(item, 'item')
                            return {
                                value: item,
                                label: {
                                    show: true,
                                    fontSize: 12,
                                    position: 'top',
                                    distance: 10,
                                    color: '#666',
                                    padding: [4, 4],
                                    formatter: '{c}',
                                    position: item > 0 ? 'top' : 'bottom',//如若数据为负, 柱状图的文字需要展示在下方
                                },
                                itemStyle: {
                                    borderRadius: item > 0 ? [15, 15, 0, 0] : [0, 0, 15, 15], // 动态设置柱状图圆角 
                                }
                            }
                        }), 
                    }
                    )
                });
            return serie;
            }(),
*/

// 多线图
export function curveEcharts(id,xData,dataArr,xColor){ 
    let chartDom = document.getElementById(id);
    let myChart = echarts.init(chartDom); 
    let option = {
        color:xColor,
        xAxis: {
            type: 'category',
            data:xData,
            boundaryGap: false,
            axisTick: { 
                show:false ,//关闭底部刻度线
            },
            axisLine: {//x轴线的配置
                show: true,//是否展示
                lineStyle: { 
                    color: "#DFDFDF", 
                    width: 1,//y轴线的宽度
                    type: "solid"//y轴线为实线
                },
            },
            axisLabel: {//X轴文字的配置 
                color: "#717171",//X轴内容文字颜色  
            }, 
        },
        yAxis: {
            type: 'value',
            splitLine: { 
                show: false,//去掉网格线  false
            },
            axisLine: {//x轴线的配置
                show: true,//是否展示
                lineStyle: { 
                    color: "#DFDFDF", 
                    width: 1,//y轴线的宽度
                    type: "solid"//y轴线为实线
                },
            },
            axisLabel: {//X轴文字的配置 
                color: "#717171",//X轴内容文字颜色  
            }, 
        },
        tooltip: {
            trigger: 'axis'
        },
        //显示色块
        legend: {
            // 色块靠右并列对齐
            type: 'scroll',
            // orient: 'vertical', 
            right: 10,
            top: 20,
            bottom: 20,
        },
        series:function(){
            let serie=[]
            dataArr.forEach((items) => { 
                serie.push(
                    {   
                        name:items.name,
                        type: 'line', 
                        smooth: true,
                        // 在这里对data进行自定义配置即可
                        data: Object.entries(items)[0][1],
                    }
                    )
                });
            return serie;
            }(),
    };

option && myChart.setOption(option,true); 
}

// 柱状图
export function columnarEcharts(id,xAxisData,dataArr,colorData,percentage){ 
    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    var option = { 
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            }, 
        },
        grid: {},
        xAxis: [{
            type: "category",
            data:xAxisData,
            axisTick: {
                // alignWithLabel: true,//底部刻度线居中
                show:false ,//关闭底部刻度线
            },
            axisLine: {//x轴线的配置
                show: true,//是否展示
                lineStyle: { 
                    color: "#DFDFDF", 
                    width: 1,//y轴线的宽度
                    type: "solid"//y轴线为实线
                },
            },
            axisLabel: {//X轴文字的配置 
                color: "#717171",//X轴内容文字颜色 
            }, 
        }],
        yAxis: [{
            type: "value",
            splitLine: { 
                show: false,//去掉网格线  false
            },
            axisLine: {//x轴线的配置
                show: true,//是否展示
                lineStyle: { 
                    color: "#DFDFDF", 
                    width: 1,//y轴线的宽度
                    type: "solid"//y轴线为实线
                },
            },
            axisLabel: {//X轴文字的配置 
                color: "#717171",//X轴内容文字颜色 
            }, 
        }], 
        legend: {
            //色块靠右垂直对齐
            type: 'scroll',
            orient: 'vertical', 
            right: 10,
            top: 20,
            bottom: 20,
        },
        series:{   
                type: 'bar',
                barWidth: 25,
                // 在这里对data进行自定义配置即可
                data: dataArr.map(item => { 
                    return {
                        value: item,
                        label: {
                            show: true,
                            fontSize: 12,
                            position: 'top',
                            distance: 10,
                            color: '#666',
                            padding: [4, 4],
                            formatter: percentage?'{c}%':'{c}',
                            position: item > 0 ? 'top' : 'bottom',//如若数据为负, 柱状图的文字需要展示在下方
                        },
                        itemStyle: {
                            borderRadius: item > 0 ? [15, 15, 0, 0] : [0, 0, 15, 15], // 动态设置柱状图圆角  
                        }
                    }
                }),  
                itemStyle: {
                    // 每个柱子颜色不一样
                    color: function (params) { 
                        var colorList = colorData
                        if (params.dataIndex >= colorList.length) {
                            params.dataIndex = params.dataIndex - colorList.length
                        }
                        return colorList[params.dataIndex]
                    },
                },
            } 
    }
    option && myChart.setOption(option,true);
}
// 纵向柱状图
export function directionEcharts(id,xAxisData,dataArr,colorData,percentage){ 
    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    var option = { 
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            }, 
        },
        grid: {},
        xAxis: [{
            type: "value", 
            axisTick: {
                // alignWithLabel: true,//底部刻度线居中
                show:false ,//关闭底部刻度线
            },
            axisLine: {//x轴线的配置
                show: true,//是否展示
                lineStyle: { 
                    color: "#DFDFDF", 
                    width: 1,//y轴线的宽度
                    type: "solid"//y轴线为实线
                },
            },
            axisLabel: {//X轴文字的配置 
                color: "#717171",//X轴内容文字颜色 
            }, 
            splitLine: { 
                show: false,//去掉网格线  false
            },
        }],
        yAxis: [{
            type: "category",
            data:xAxisData,
            splitLine: { 
                show: false,//去掉网格线  false
            },
            axisLine: {//x轴线的配置
                show: true,//是否展示
                lineStyle: { 
                    color: "#DFDFDF", 
                    width: 1,//y轴线的宽度
                    type: "solid"//y轴线为实线
                },
            },
            axisLabel: {//X轴文字的配置 
                color: "#717171",//X轴内容文字颜色 
            }, 
            axisTick: { 
                show:false ,//刻度线关
            },
        }], 
        legend: {
            //色块靠右垂直对齐
            type: 'scroll',
            orient: 'vertical', 
            right: 10,
            top: 20,
            bottom: 20,
        },
        series:{   
                type: 'bar',
                barWidth: 15,//柱宽
                // 在这里对data进行自定义配置即可
                data: dataArr.map(item => { 
                    return {
                        value: item,
                        label: {
                            show: true,
                            fontSize: 12,
                            position: 'right',
                            distance: 10,
                            color: '#666',
                            padding: [4, 4],
                            formatter: percentage?'{c}%':'{c}',
                            position: item > 0 ? 'right' : 'left',//如若数据为负, 柱状图的文字需要展示在下方
                        }, 
                    }
                }),  
                itemStyle: {
                    // 柱状图渐变
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        {
                            offset: 0,
                            color: colorData[0]
                        },
                        {
                            offset: 1,
                            color: colorData[1]
                        }
                    ])  
                },
            } 
    }
    option && myChart.setOption(option,true);
}
// 饼图
export function cakeEcharts(id,dataArr,colorData){ 
    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    var option = { 
        tooltip: {
            trigger: 'item'
        }, 
        color:colorData,//颜色
        series: [
            {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data:dataArr,//数据
            emphasis: {
                itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
            }
        ]
    } 
option && myChart.setOption(option,true);
}